<template>
	<view class="activeDetailPage" v-if="goodsDetail">
		<view class="banner">
			<image class="img" :src="goodsDetail.image"></image>
		</view>
		<view class="activeContent">
			<view class="title">
				{{ goodsDetail.name }}
			</view>
			<view class="acitveTime u-m-t-20">
				{{ goodsDetail.description }}
			</view>
			<view class="acitveTime u-m-t-20 u-flex u-flex-between u-flex-items-center">
				<view class="red">￥{{ goodsDetail.price }}</view>
				<view class="green">{{ goodsDetail.sales? goodsDetail.sales + '人购买' : '暂无购买' }}</view>
			</view>
		</view>
		<view class="activeContent u-m-t-20 goodDesc">
			<view class="title">商品描述</view>
			<view class="acitveHite">
				<u-parse :content="goodsDetail.content"></u-parse>
			</view>
		</view>
		<view class="order-confirm" @click="$Tips('/pages/order/goodsConfirm?goods_id='+goods_id)">去兑换</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_id: null,
				goodsDetail: null,
			};
		},
		onLoad(options) {
			if (options && options.goods_id) {
				this.goods_id = options.goods_id
				this.getGoodsDetail();
			}
		},
		methods: {
			getGoodsDetail() {
				this.$Api.goods.getGoodsDetail({
					goods_id: this.goods_id,
				}).then((res) => {
					this.goodsDetail = res.data;
				});
			},
		},
	};
</script>

<style lang="scss">
	.activeDetailPage {
		height: 100%;
		min-height: 100vh;
		font-family: PingFang SC;
		background: #f5f5f4;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.order-confirm {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 682rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-weight: bold;
			font-size: 34rpx;
			color: #ffffff;
			background: #a3c616;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(163, 198, 22, 0.3);
			border-radius: 24rpx;
		}

		.head {
			background: #fff;
		}

		.banner {
			width: 100%;
			height: 700rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.activeContent {
			width: 100%;
			background: #fff;
			padding: 26rpx 38rpx;
			box-sizing: border-box;
			text-align: justify;

			.title {
				display: flex;
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				align-items: center;
			}

			.activeimg {
				margin-top: 20rpx;
				width: 100%;
			}

			.acitveTime {
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 400;
				font-size: 28rpx;
				color: #999ca7;
				display: flex;
				margin-top: 24rpx;

				.green {
					font-size: 24rpx;
					color: #30AA4D;
					line-height: 18px;
					background: rgba(48, 170, 77, 0.1);
					border-radius: 3px;
					padding: 6rpx 14rpx;
				}

				.red {
					font-size: 38rpx;
					color: #FD463E;
				}
			}

			.acitveHite {
				font-size: 28rpx;
				color: #999ca7;
				line-height: 48rpx;
				margin-top: 18rpx;
			}

			.acitveMsg {
				display: flex;
				justify-content: space-between;
			}

			.acitveMsg:nth-child(2) {
				margin-left: 120rpx;
			}
		}

		.goodDesc {
			min-height: 50vh;
		}

		.footer {
			width: 100%;
			height: 190rpx;
			position: fixed;
			// bottom: calc(env(safe-area-inset-bottom) / 2);
			bottom: 0;
			background: #fff;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			padding: 20rpx 38rpx;
			box-sizing: border-box;

			.money {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				background: #a3c616;
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(163, 198, 22, 0.3);
				border-radius: 24rpx;
				font-weight: 500;
				font-size: 34rpx;
				margin-top: 18rpx;
			}
		}
	}
</style>